<!--/**
* Author: ganqz
* Date: 2021-05-24 23:19
* Desc: block
*/-->
<template>
  <div class="zm-block">
    <div class="zm-block__title df-center">
      <div class="flex-1">
        <slot name="title">{{ title }}</slot>
      </div>
      <slot name="value"></slot>
    </div>
    <div class="zm-block__content" :class="{'df-center':isFlex}">
      <slot></slot>
    </div>
    <slot name="desc"></slot>
  </div>
</template>

<script>
export default {
  name: 'Block',
  components: {},
  props: {
    title: {
      type: String,
      default: '标题'
    },
    isFlex: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  methods: {}
};
</script>
<style lang="scss">
@include b(block) {
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 2px 2px 5px 2px $--color-primary-light-5;
  @include e(title) {
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid $--border-color-base;
  }
  @include e(content) {
    padding-top: 10px;
  }
}
</style>
